function waterFall() {
  const minGap = 20 // 粗略设定一个你想要的最小间距
  const itemWidth = 300 // 定义每一项的宽度(保证等宽)
  const scrollBarWidth = getScrollbarWidth(); //获取滚动条宽度
  const pageWidth = window.innerWidth - scrollBarWidth; // 获取当前页面的宽度
  // 实际列数= 页面宽度/(图片宽度+最小间距)
  const column - Math.floor(pageWidth / (itemWidth + minGap))
  //计算真实间距
  const gap = (pageWidth - itemWidth * column) / column / 2;
  const items = document.querySelectorAll("img")
  const heightArr = [] // 定义一个空数组，保存最低高度

  //便利所有的外层容器
  for (let i = 0; i < items.length; i++) {
    const height = items[i].offsetHeight;
    if (i < column) {
      // 索引i小于列数，当前为第一行；直接设置元素距离上一个左边距
      items[i].style.cssText = `top: ${gap}px; left: ${(itemWidth + gap) * i + gap}px`;
      // 保存当前元素的高度
      heightArr.push(height)
    } else {
      // 不是第一行，进行比对
      let minHeight = heightArr[0]
      let minIndex = 0
      for (let j = 0; j < heightArr.length; j++) {
        // 通过循环遍历比对，拿到最小值和最小值的索引
        if (minHeight > heightArr[j]) {
          minHeight = heightArr[j]
          minIndex = j
        }
      }
      items[i].style.cssText = `top:${minHeight + gap * 2}px; left: ${(itemWidth + gap) * minIndex + gap}px`
      heightArr[minIndex] = minHeight + gap + height


    }
  }
}
// 获取滚动条宽度
function getScrollbarWidth() {
  const oDiv = document.createElement('div')
  oDiv.style.cssTex = `width:50px; height:50px; overflow:scroll;`
  document.body.appendChild(oDiv) // 把div添加到body中
  const scrollbarWidth = oDiv.offsetWidth - oDiv.clientWidth; // 使最大宽度和可视宽度相减，获得滚动条宽度
  oDiv.remove();// 移出创建的div
  return scrollbarWidth; // 返回滚动条宽度
}
window.onload = waterFall
window.onresize = waterFall;

